<route lang="yaml">
meta:
  title: 会员管理
</route>

<script lang="ts" setup>
import type { ComponentSize, TableInstance } from 'element-plus'
import type { CSSProperties } from 'vue'
import { useTransition } from '@vueuse/core'
import dayjs from 'dayjs'
import { ref } from 'vue'

interface User {
  id: number
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])

/**
 * 带有数字向上变化特效的数据
 */
const countUp = reactive({
  userRegNumber: 0,
  fileNumber: 0,
  usersNumber: 0,
  addonsNumber: 0,
})

const countUpRefs = toRefs(countUp)
const userRegNumberOutput = useTransition(countUpRefs.userRegNumber, {
  duration: 1500,
})
const fileNumberOutput = useTransition(countUpRefs.fileNumber, {
  duration: 1500,
})
const usersNumberOutput = useTransition(countUpRefs.usersNumber, {
  duration: 1500,
})
const addonsNumberOutput = useTransition(countUpRefs.addonsNumber, {
  duration: 1500,
})
const statisticValueStyle: CSSProperties = {
  fontSize: '28px',
}

// 表格数据
const selectable = (row: User) => ![1, 2].includes(row.id)
function handleSelectionChange(val: User[]) {
  multipleSelection.value = val
}

const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 5,
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 6,
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 7,
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const size = ref<'default' | 'large' | 'small'>('default')
const input_phone = ref('')
const value1 = ref('')
const value2 = ref('')
const user_source = ref('all')
const user_lever = ref('')
const input_keys = ref('')

const options = [
  { value: 'Option1', label: '初级会员' },
  { value: 'Option2', label: '中级会员' },
  { value: 'Option3', label: '高级会员' },
  { value: 'Option4', label: '终极会员' },
]

const tabs = [
  { label: '全部客户', value: 'all' },
  { label: '新增客户', value: 'new' },
  { label: '加购未支付客户', value: 'cart' },
  { label: '微信互动', value: 'wechat' },
]
const activeTab = ref('all')

const isAddOpen = ref(false)
const addForm = reactive({
  name: '',
  account: '',
  phone: '',
  level: '',
  source: 'all',
  remark: '',
})
function resetAddForm() {
  addForm.name = ''
  addForm.account = ''
  addForm.phone = ''
  addForm.level = ''
  addForm.source = 'all'
  addForm.remark = ''
}
function handleAddConfirm() {
  const id = Math.max(...tableData.map(i => i.id)) + 1
  tableData.unshift({
    id,
    date: dayjs().format('YYYY-MM-DD'),
    name: addForm.name || addForm.account || `User${id}`,
    address: addForm.phone || '—',
  })
  isAddOpen.value = false
  resetAddForm()
}

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

const currentPage1 = ref(5)
const size_page = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

function handleSizeChange(_val: number) {
  // console.log(`${val} items per page`)
}
function handleCurrentChange(_val: number) {
  // console.log(`current page: ${val}`)
}
</script>

<template>
  <div>
    <FaPageMain>
      <div class="mb-4 flex items-center justify-between">
        <div class="text-lg font-600">
          会员列表
        </div>
        <FaButton size="sm" @click="isAddOpen = true">
          添加客户
        </FaButton>
      </div>

      <FaTabs v-model="activeTab" :list="tabs" class="mb-4" list-class="grid grid-cols-4 gap-2" content-class="mt-0">
        <template #all>
          <div class="grid grid-cols-4 gap-4">
            <FaCard class="p-4">
              <div class="text-sm text-muted-foreground">
                全部客户
              </div>
              <div class="mt-2 flex items-center justify-between">
                <el-statistic :value="userRegNumberOutput" :value-style="statisticValueStyle" />
                <span class="text-green-600">+14%</span>
              </div>
            </FaCard>
            <FaCard class="p-4">
              <div class="text-sm text-muted-foreground">
                新增客户
              </div>
              <div class="mt-2 flex items-center justify-between">
                <el-statistic :value="fileNumberOutput" :value-style="statisticValueStyle" />
                <span class="text-green-600">+50%</span>
              </div>
            </FaCard>
            <FaCard class="p-4">
              <div class="text-sm text-muted-foreground">
                加购未支付客户
              </div>
              <div class="mt-2 flex items-center justify-between">
                <el-statistic :value="usersNumberOutput" :value-style="statisticValueStyle" />
                <span class="text-green-600">+28%</span>
              </div>
            </FaCard>
            <FaCard class="p-4">
              <div class="text-sm text-muted-foreground">
                微信互动
              </div>
              <div class="mt-2 flex items-center justify-between">
                <el-statistic :value="addonsNumberOutput" :value-style="statisticValueStyle" />
                <span class="text-green-600">+88%</span>
              </div>
            </FaCard>
          </div>
        </template>
        <template #new />
        <template #cart />
        <template #wechat />
      </FaTabs>

      <FaCard class="mb-4 p-4">
        <div class="grid grid-cols-3 gap-4">
          <div class="min-w-0">
            <div class="mb-1 text-sm text-muted-foreground">
              上次消费时间
            </div>
            <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :size="size" style="width: 100%;" />
          </div>
          <div class="min-w-0">
            <div class="mb-1 text-sm text-muted-foreground">
              成为客户时间
            </div>
            <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" :size="size" style="width: 100%;" />
          </div>
          <div class="min-w-0">
            <div class="mb-1 text-sm text-muted-foreground">
              手机号
            </div>
            <FaInput v-model="input_phone" class="w-full" />
          </div>
        </div>
        <div class="grid grid-cols-4 mt-4 gap-4">
          <div class="min-w-0">
            <div class="mb-1 text-sm text-muted-foreground">
              会员等级
            </div>
            <FaSelect v-model="user_lever" :options="options.map(o => ({ label: o.label, value: o.value }))" class="w-full" />
          </div>
          <div class="min-w-0">
            <div class="mb-1 text-sm text-muted-foreground">
              关键词
            </div>
            <FaInput v-model="input_keys" class="w-full" />
          </div>
          <div class="min-w-0">
            <div class="mb-1 text-sm text-muted-foreground">
              会员来源
            </div>
            <FaSelect v-model="user_source" :options="[{ label: '全部', value: 'all' }, { label: '微信', value: 'wechat' }, { label: '站内', value: 'site' }]" class="w-full" />
          </div>
          <div class="flex items-end gap-2">
            <FaButton size="sm">
              立即搜索
            </FaButton>
            <FaButton size="sm" variant="outline" @click="input_phone = ''; input_keys = ''; user_source = 'all'; user_lever = ''">
              清空数据
            </FaButton>
          </div>
        </div>
      </FaCard>

      <div class="data-list">
        <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" :selectable="selectable" width="55" />
          <el-table-column label="会员名称" width="120">
            <template #default="scope">
              {{ scope.row.date }}
            </template>
          </el-table-column>
          <el-table-column property="name" label="会员账号" width="120" />
          <el-table-column property="address" label="手机号" />
          <el-table-column property="address" label="付款订单总数" />
          <el-table-column property="address" label="付款金额" />
          <el-table-column property="address" label="会员身份" />
          <el-table-column property="address" label="绑定推广员" />
          <el-table-column property="address" label="注册时间" />
          <el-table-column property="address" label="操作" />
        </el-table>
        <div class="mt-4">
          <el-pagination v-model:current-page="currentPage1" :page-size="100" :size="size_page" :disabled="disabled" :background="background" layout="total, prev, pager, next" :total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </FaPageMain>
    <FaDrawer v-model="isAddOpen" title="添加客户" show-cancel-button show-confirm-button confirm-button-text="确定" cancel-button-text="取消" @confirm="handleAddConfirm">
      <div class="grid grid-cols-2 gap-4 p-2">
        <div>
          <div class="mb-1 text-sm text-muted-foreground">
            会员名称
          </div>
          <FaInput v-model="addForm.name" class="w-full" />
        </div>
        <div>
          <div class="mb-1 text-sm text-muted-foreground">
            会员账号
          </div>
          <FaInput v-model="addForm.account" class="w-full" />
        </div>
        <div>
          <div class="mb-1 text-sm text-muted-foreground">
            手机号
          </div>
          <FaInput v-model="addForm.phone" class="w-full" />
        </div>
        <div>
          <div class="mb-1 text-sm text-muted-foreground">
            会员等级
          </div>
          <FaSelect v-model="addForm.level" :options="options.map(o => ({ label: o.label, value: o.value }))" class="w-full" />
        </div>
        <div>
          <div class="mb-1 text-sm text-muted-foreground">
            会员来源
          </div>
          <FaSelect v-model="addForm.source" :options="[{ label: '全部', value: 'all' }, { label: '微信', value: 'wechat' }, { label: '站内', value: 'site' }]" class="w-full" />
        </div>
        <div class="col-span-2">
          <div class="mb-1 text-sm text-muted-foreground">
            备注
          </div>
          <FaTextarea v-model="addForm.remark" class="w-full" />
        </div>
      </div>
    </FaDrawer>
  </div>
</template>

<style scoped lang="scss">
.small-panel-box {
  margin-top: 20px;
}

.small-panel {
  padding: 25px;
  margin-bottom: 20px;
  background-color: #e9edf2;
  border-radius: var(--el-border-radius-base);

  .small-panel-title {
    font-size: 15px;
    color: #92969a;
  }

  .small-panel-content {
    display: flex;
    align-items: flex-end;
    margin-top: 20px;
    color: #2c3f5d;

    .content-left {
      display: flex;
      align-items: center;
      font-size: 24px;
    }

    .content-right {
      margin-left: auto;
      font-size: 18px;
    }

    .color-success {
      color: var(--el-color-success);
    }

    .color-warning {
      color: var(--el-color-warning);
    }

    .color-danger {
      color: var(--el-color-danger);
    }

    .color-info {
      color: var(--el-text-color-secondary);
    }
  }
}

.growth-chart {
  margin-bottom: 20px;
}

.user-growth-chart,
.file-growth-chart {
  height: 260px;
}

.new-user-growth {
  height: 300px;
}

.user-source-chart,
.user-surname-chart {
  height: 400px;
}

.demo-date-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
}

.demo-date-picker .block {
  display: flex;
  // border-right: solid 1px var(--el-border-color);
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 300px;
  padding: 1rem 0;
  text-align: center;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  margin-bottom: 1rem;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

@media screen and (width <= 1200px) {
  .demo-date-picker .block {
    flex: 0 0 100%;
    min-width: auto;
    padding: 1rem 0;
    border-right: none;
    border-bottom: solid 1px var(--el-border-color);
  }

  .demo-date-picker .block:last-child {
    border-bottom: none;
  }
}
</style>
